<template>
  <div class="liveAudienceAnalysis">
    <p class="title">观众性别分布</p>
    <div class="portrait portraitGender">
      <gender v-if="pie_data02.length" :pieData="pie_data02" />
      <!-- <detailsBar v-if="age.length" :starXData="age" :starYData="starYData" /> -->
      <div
        class="zw"
        v-if="!pie_data02.length&&!loading"
      >
        <img src="../../../assets/three/noData.png" alt />
        <p>暂无性别数据</p>
      </div>
      <div
        v-loading="loading"
        v-if="!pie_data02 || !pie_data02.length"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <p class="title">观众年龄分布</p>
    <div class="portrait">
      <detailsBar v-if="age.length" :starXData="age" :starYData="starYData" />
      <div class="zw" v-if="!age.length&&!loading">
        <img src="../../../assets/three/noData.png" alt />
        <p>暂无年龄数据</p>
      </div>
      <div
        v-loading="loading"
        v-if="!pie_data02.length||!pie_data02"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <p class="title">观众来源</p>
    <div class="source">
      <div class="but_box">
        <button @click="isSel=1" :class="isSel==1?'active':''">观众来源分布</button>
        <button @click="isSel=2" :class="isSel==2?'active':''">观众来源实时分布</button>
      </div>
      <div class="distribution" v-if="isSel==1">
        <live_pie :valueData="pie_data01" v-if="pie_data01.length != 0 " />
        <div
          class="zw"
          v-if="!pie_data01&&!loading||!pie_data01.length&&!loading"
        >
          <img src="../../../assets/three/noData.png" alt />
          <p>暂无数据</p>
        </div>
        <div
          v-loading="loading"
          v-if="!pie_data01.length||!pie_data01"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <div class="distribution" v-if="isSel==2">
        <my_line2
          v-if="x_data6"
          :x_data="x_data6"
          :y1_data="y1_data6"
          :y2_data="y2_data7"
          :y3_data="y2_data8"
          :y4_data="y2_data9"
          :flow_chartxx="x_data66"
          name1="同城"
          name2="粉丝"
          name3="视频"
          name4="其他"
          formatter="1"
          size="12"
          grid_line="false"
          line_color="rgba(171,231,255,0.3)"
          font_color="rgba(235,235,235,0.7)"
        />
        <div
          class="zw"
          v-if="!x_data6&&!loading01||!x_data6.length&&!loading01"
        >
          <img src="../../../assets/three/noData.png" alt />
          <p>暂无数据</p>
        </div>
        <div
          v-loading="loading01"
          v-if="!x_data6.length||!x_data6"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
    </div>
    <p class="title">直播互动</p>
    <div class="interaction">
      <div class="but_box">
        <button @click="isInter=1" :class="isInter==1?'active':''">弹幕详情</button>
        <button @click="isInter=2" :class="isInter==2?'active':''">土豪送礼</button>
      </div>
      <div class="ulBullet" v-if="isInter==1&&barrage_data.length">
        <vue-seamless-scroll :data="barrage_data" :class-option="defaultOption">
          <ul>
            <li v-for="item,i in barrage_data" :key="i+'a'">
              <div>{{ timestamp(item.create_time, "h:m") }}</div>
              <div>
                <img :src="item.logo" v-errorImg:talent />
                <p>
                  {{ item.nickname }}：
                  <span>{{ item.message }}</span>
                </p>
              </div>
            </li>
          </ul>
        </vue-seamless-scroll >
      </div>
      <ul class="ulGift" v-if="isInter==2&&gift_data.length">
        <li v-for="item ,i in gift_data" :key="i+'d'">
          <div>{{i+1}}</div>
          <div>
            <img :src="item.logo" v-errorImg:talent />
            <p>{{ item.nickname }}</p>
          </div>
          <div>
            {{ format_num(item.sound) }}
            <span>音浪</span>
          </div>
        </li>
      </ul>
      <div
        v-loading="loading02"
        v-if="isInter==1&&!barrage_data||isInter==1&&!barrage_data.length"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <div
        class="zw"
        v-if="isInter==1&&!barrage_data&&!loading02||isInter==1&&!barrage_data.length&&!loading02"
      >
        <img src="../../../assets/three/noData.png" alt />
        <p>暂无数据</p>
      </div>
      <div
        v-loading="loading02"
        v-if="isInter==2&&!gift_data||isInter==2&&!gift_data.length"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <div
        class="zw"
        v-if="isInter==2&&!gift_data&&!loading||isInter==2&&!gift_data.length&&!loading"
      >
        <img src="../../../assets/three/noData.png" alt />
        <p>暂无数据</p>
      </div>
      <!-- <p
        class="noMore"
        v-if="gift_data.length&&!loading02||barrage_data.length&&loading02"
      >已经到底了哟，电脑登录dy.zsjx114.com查看更多详细数据~</p> -->
    </div>
  </div>
</template>

<script>
import live_pie from './live_pie.vue';
// import gender from './GenderSpread.vue';
import gender from '@/component/GenderSpread.vue';
import detailsBar from './DetailsBar';
import my_line2 from './line2.vue';
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  props: ['pie_data01', 'status'],
  data() {
    return {
      isSel: 1,
      isInter: 1,
      gift_data: [],
      loading02: false,
      pie_data02: [],
      pie_data03: [],
      map_data: [],
      x_data6: null,
      y1_data6: null,
      y2_data7: null,
      y2_data8: null,
      y2_data9: null,
      age: [],
      word_data: [],
      barrage_data: [],
      loop01: null,
      loading: false,
      loading01: false,
      tiemr: null,
    };
  },
  components: { gender, detailsBar, live_pie, my_line2 ,vueSeamlessScroll},
  computed: {
    defaultOption () {
      return {
        step: .5, // 数值越大速度滚动越快
        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {},
  mounted() {
    this.get_data02();
    this.get_data03();
    this.get_data04();
    // this.$nextTick(()=>{
    //   this.move();
    // });
    this.tiemr = setInterval(() => {
      this.get_data02();
      this.get_data03();
      this.get_data04();
    }, 120000);
  },
  watch: {},
  destroyed() {
    this.clearTime();
  },
  methods: {
    clearTime() {
      clearInterval(this.tiemr);
      this.tiemr = null;
      clearInterval(this.loop01);
      this.loop01 = null;
    },
    // 观众画像
    get_data04() {
      if (this.status == 2) {
        clearInterval(this.tiemr);
      }
      let that = this;
      this.loading = true;
      this.$axios({
        method: 'get',
        url: '/api/live/GetLiveReword',
        params: {
          room_id: that.$route.query.id
          // room_id: '6992048590566869800'
        }
      })
        .then(response => {
          this.loading = false;
          if (response.data.code == 0) {
            if (response.data.data.fans.length) {
              this.gift_data = response.data.data.fans.slice(0, 10);
            } else {
              this.gift_data = [];
            }

            this.pie_data02 = response.data.data.fans_attrbute.gender;
            // console.log(this.pie_data02);
            if (this.pie_data02.length == 2) {
              if (this.pie_data02[0].name == '女性') {
                let temp = this.pie_data02[0];
                this.pie_data02[0] = this.pie_data02[1];
                this.pie_data02[1] = temp;
              }
            }
            this.pie_data03 = response.data.data.fans_attrbute.age;

            this.age = this.pie_data03.map(item => {
              return item.name;
            });
            this.starYData = this.pie_data03.map(item => {
              return item.value;
            });
            this.nodata = this.starYData.some(item => {
              return item != 0;
            });
            this.map_data = response.data.data.fans_attrbute.province;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    get_data02() {
      this.loading01 = true;
      this.response02 = null;
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/live/GetLiveAttribute',
        params: {
          // room_id: "6960521564123122463",
          // room_id: '6992070055278267150'
          room_id: that.$route.query.id
        }
      })
        .then(response => {
          this.loading01 = false;
          if (response.data.code == 1003) {
            this.permissions = 0;
          }
          if (response.data.code == 0) {
            if (response.data.data.froms_chart) {
              this.x_data66 = response.data.data.froms_chart.x;
              this.x_data6 = response.data.data.froms_chart.x.map(ele => {
                return this.timestamp(ele, 'h:m');
              });
              this.y1_data6 = response.data.data.froms_chart.y_city;
              this.y2_data7 = response.data.data.froms_chart.y_fans;
              this.y2_data8 = response.data.data.froms_chart.y_video;
              this.y2_data9 = response.data.data.froms_chart.y_other;
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    get_data03() {
      this.loading02 = true;
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/live/GetLiveLayerWord',
        params: {
          room_id: that.$route.query.id
          // room_id: '6992070055278267150'
        }
      })
        .then(response => {
          this.loading02 = false;
          if (response.data.code == 0) {
            if (response.data.data.hot_word.length) {
              this.word_data = response.data.data.hot_word.slice(0, 10);
            }
            if (response.data.data.fans_word.length) {
              if(response.data.data.fans_word.length < 10){
                this.defaultOption.step = 0;
              }
              this.barrage_data = response.data.data.fans_word;
              // console.log(this.defaultOption);
            }else{
              this.defaultOption.step = 0;
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    move() {  //评论向上滚动
        this.loop01 = setInterval(() => {
          let itemData = this.barrage_data.slice(0,1);
          this.barrage_data.push(itemData[0]);
          this.barrage_data.splice(0,1);
        }, 3000);
        if (this.status == 2) {
          clearInterval(this.loop01);
        }
    }
  }
};
</script>

<style lang="less" scoped>
.liveAudienceAnalysis {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-top: 0.35rem;

  .title {
    text-align: left;
    position: relative;
    font-size: 0.4rem;
    font-weight: 600;
    color: #ffffff;
    text-indent: 0.266667rem;
    vertical-align: top;
    margin-bottom: 0.4rem;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-42%);
      vertical-align: middle;
      width: 0.08rem;
      height: 0.373333rem;
      background-color: #fd7f2c;
      border-radius: 0.04rem;
    }
  }
  .portrait {
    position: relative;
    min-height: 3rem;
    width: 100%;
    margin-bottom: 0.5rem;
    &.portraitGender{
      min-height: 1.5rem;
    }
  }
  .source {
    height: 6.613333rem;
    margin-bottom: 0.666667rem;
    width: 100%;
  }
  .interaction {
    width: 100%;
    min-height: 2.666667rem;
    // height: 13.333333rem;
    // overflow: hidden;
  }
  #GenderSpread {
    height: 1.44rem;
  }
  #detailsBar {
    width: 100%;
    height: 4rem;
  }
  .but_box {
    display: flex;
    justify-content: space-between;
    button {
      width: 4.466667rem;
      height: 0.8rem;
      background-color: rgba(195, 202, 223, 0.1);
      border-radius: 0.133333rem;
      font-size: 0.32rem;
      color: #c3cadf;
      border: none;
      outline: none;
    }
    .active {
      background-color: #fd7f2c;
      color: #fff;
    }
  }
  .distribution {
    width: 100%;
    height: 5.333333rem;
    margin-top: 0.266667rem;
  }
  .ulBullet {
    padding-top: 0.4rem;
    height: 10.93rem;
    overflow: hidden;
    li {
      height: 0.826667rem;
      display: flex;
      margin-bottom: 0.266667rem;
      > div {
        &:nth-child(1) {
          flex: 0 0 1.666667rem;
          font-size: 0.373333rem;
          color: #c3cadf;
          align-self: center;
        }
        &:nth-child(2) {
          display: flex;
          align-self: center;
          > img {
            flex: 0 0 0.813333rem;
            margin-right: 0.266667rem;
            align-self: center;
            width: 0.813333rem;
            height: 0.826667rem;
            background-color: #ff7500;
            border-radius: 50%;
          }
          > p {
            align-self: center;
            font-size: 0.373333rem;
            color: #c3cadf;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 6.5rem;
            > span {
              align-self: center;
              font-size: 0.373333rem;
              color: #c2cae1;
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
  .noMore {
    text-align: center;
    font-size: 0.32rem;
    padding-bottom: 0.4rem;
    color: #c3cadf;
    opacity: 0.5;
  }
  .ulGift {
    padding-top: 0.4rem;
    height: 10.93rem;
    overflow: hidden;
    li {
      height: 0.826667rem;
      display: flex;
      margin-bottom: 0.266667rem;
      justify-content: space-between;
      > div {
        &:nth-child(1) {
          align-self: center;
          font-size: 0.373333rem;
          width: 1.306667rem;
          color: #c3cadf;
          text-indent: 0.266667rem;
        }
        &:nth-child(2) {
          flex: 1;
          align-self: center;
          display: flex;
          > img {
            align-self: center;
            width: 0.813333rem;
            height: 0.826667rem;
            border-radius: 50%;
            // margin-left: 0.773333rem;
            margin-right: 0.266667rem;
          }
          p {
            align-self: center;
            font-size: 0.373333rem;
            color: #c3cadf;
            width: 4.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        &:nth-child(3) {
          align-self: center;
          font-size: 0.373333rem;

          color: #c3cadf;
          span {
            font-size: 0.373333rem;

            color: #c3cadf;
            opacity: 0.5;
          }
        }
      }
    }
  }
  .zw {
    width: 100%;
    margin-top: 1rem;
    // margin-left: -0.4rem;
    position: relative;
    height: 3.986667rem;
    text-align: center;
    img {
      width: 3.96rem;
      height: 2.826667rem;
    }
    p {
      font-size: 0.346667rem;
      color: #c3cadf;
      opacity: 0.5;
    }
  }
}
</style>
